<template>
  <el-drawer v-model="drawerVisible" :modal="false" :destroy-on-close="true" size="600px" title="导入客户">
    <div class="import-wrap">
      <div class="desc-card flx-justify-between">
        <div class="desc-card-item">
          <div class="p-title">下载模板</div>
          <div class="des">
            <p>注意事项：</p>
            <div class="item">
              <div class="index">1.&nbsp;&nbsp;</div>
              <div class="value">模板中表头字段不可更改，表头行不可删除；</div>
            </div>
            <div class="item">
              <div class="index">2.&nbsp;&nbsp;</div>
              <div class="value">表头带*为必填字段，全部填写才可正常导入，未带*为非必填字段，可选择性填入；</div>
            </div>
            <div class="item">
              <div class="index">3.&nbsp;&nbsp;</div>
              <div class="value">支持20M以内的xls、xlsx格式文件，请下载标准模板！</div>
            </div>
          </div>
          <div class="flx-center download">
            <el-button type="primary">下载模板</el-button>
          </div>
        </div>
        <div class="desc-card-item">
          <div class="p-title">导入设置</div>
          <div class="des">
            <p>表格中数据重复：</p>
            <el-radio-group v-model="params.repeated">
              <el-radio value="1" size="large">覆盖</el-radio>
              <el-radio value="2" size="large">跳过</el-radio>
            </el-radio-group>
            <p>与现有数据重复：</p>
            <el-radio-group v-model="params.repeated2">
              <el-radio value="1" size="large">再次进入</el-radio>
              <el-radio value="2" size="large">跳过</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>

      <el-upload class="upload-wrap mt-20" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将20M内，xls、xlsx格式的文件拖拽到此区域，或 <em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";

interface DrawerProps {
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const params = reactive({
  repeated: "1",
  repeated2: "1"
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerVisible.value = true;
};

// 提交
const handleSubmit = () => {
  //   await drawerProps.value.api!(drawerProps.value.row);
  //   ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
  //   drawerProps.value.search!();
  //   drawerVisible.value = false;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
.import-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;

  .upload-wrap {
    flex: 1;

    :deep(.el-upload),
    :deep(.el-upload-dragger) {
      height: 100%;
    }
  }
}
.desc-card {
  &-item {
    width: calc(50% - 26px);
    height: 224px;
    background: #f5f7fa;
    padding: 8px;
    border-radius: 4px;

    p {
      padding: 0;
      margin: 0;
    }

    .des {
      padding-top: 8px;
      font-size: 12px;
      line-height: 20px;

      .item {
        display: flex;
      }
    }
    .download {
      margin-top: 14px;
    }
  }
}
</style>
